<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            margin: 0;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="vueContainer">
</div>
<template id="content">
    <div style="position:absolute; top: 0">
        <p>
            <button @click="leftClickEvent" style="padding:8px 12px;">注册并获取鼠标左键点击事件</button>
            <button @click="moreLeftClickEvent" style="padding:8px 12px;">追加注册鼠标左键点击事件</button>
            <button @click="moreAgainLeftClickEvent" style="padding:8px 12px;">再次追加注册鼠标左键点击事件</button>
            <button @click="signOutleftClickEvent" style="padding:8px 12px;">注销鼠标左键点击事件</button>
        </p>
        <!--        <p>-->
        <!--            <button @click="leftClickEvents" style="padding:8px 12px;">注册并获取鼠标左键点击事件</button>-->
        <!--            <button @click="moreLeftClickEvents" style="padding:8px 12px;">追加注册鼠标左键点击事件</button>-->
        <!--            <button @click="moreAgainLeftClickEvents" style="padding:8px 12px;">再次追加注册鼠标左键点击事件</button>-->
        <!--            <button @click="signOutleftClickEvents" style="padding:8px 12px;">注销鼠标左键点击事件</button>-->
        <!--        </p>-->
    </div>
</template>
<script src="../../config/index.js"></script>
<script src="ac-min.js"></script>
<script src="eventListener.js"></script>
<script>
  const { createApp, ref, onMounted, onBeforeUnmount } = Vue
  const app = createApp({
    template: `#content`,
    setup() {
      const clickHandlerCallBack = ref(null) //用来存储 回调事件
      const clickHandlerMore = ref(null) //用来存储 回调事件
      let eventLis
      let savedViewpoint
      let eventArr = []//事件待执行队列
      /**
       * 注册鼠标左键点击事件
       */
      const leftClickEvent = () => {
        console.log(Cesium.ScreenSpaceEventType, 'Cesium.ScreenSpaceEventType')
        console.log(Cesium, 'Cesium.ScreenSpaceEventType')
        // // 获取默认的左键处理程序，用于在左键单击时未选中某个特性
        // const clickHandler = viewer.screenSpaceEventHandler.getInputAction(
        //   // viewer.screenSpaceEventHandler是Cesium中的一个对象，用于处理屏幕空间的交互事件。
        //   // getInputAction方法用于获取指定类型事件的处理函数。
        //   Cesium.ScreenSpaceEventType.LEFT_CLICK
        // )
        // console.log(clickHandler, 'cl565959595')
        eventArr.push(function(
          movement
        ) {
          console.log(111)
        })
        viewer.screenSpaceEventHandler.setInputAction(() => {
            for(let i of eventArr) {
              i()
            }
          },
          Cesium.ScreenSpaceEventType.LEFT_CLICK)

      }
      /**
       * 追加鼠标左键点击事件
       */
      const moreLeftClickEvent = () => {
        // 获取默认的左键处理程序，用于在左键单击时未选中某个特性
        clickHandlerCallBack.value = viewer.screenSpaceEventHandler.getInputAction(
          // viewer.screenSpaceEventHandler是Cesium中的一个对象，用于处理屏幕空间的交互事件。
          // getInputAction方法用于获取指定类型事件的处理函数。
          Cesium.ScreenSpaceEventType.LEFT_CLICK
        )
        eventArr.push(function(
          movement
        ) {
          console.log(222)
        })
        // viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
        //     movement
        //   ) {
        //     clickHandlerCallBack.value()
        //     console.log(222)
        //   },
        //   Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }
      /**
       * 再次追加鼠标左键点击事件
       */
      const moreAgainLeftClickEvent = () => {
        // 获取默认的左键处理程序，用于在左键单击时未选中某个特性
        clickHandlerMore.value = viewer.screenSpaceEventHandler.getInputAction(
          // viewer.screenSpaceEventHandler是Cesium中的一个对象，用于处理屏幕空间的交互事件。
          // getInputAction方法用于获取指定类型事件的处理函数。
          Cesium.ScreenSpaceEventType.LEFT_CLICK
        )
        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
            movement
          ) {
            clickHandlerMore.value()
            console.log(333)
          },
          Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }
      /**
       * 注销鼠标左键点击事件
       */
      const signOutleftClickEvent = () => {
        console.log('注销鼠标左键点击事件')
        //注销鼠标左键的方法直接注销了鼠标左键事件，回调为undefined        。
        // viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
        // const clickHandler = viewer.screenSpaceEventHandler.getInputAction(
        //   // viewer.screenSpaceEventHandler是Cesium中的一个对象，用于处理屏幕空间的交互事件。
        //   // getInputAction方法用于获取指定类型事件的处理函数。
        //   Cesium.ScreenSpaceEventType.LEFT_CLICK
        // )
        // console.log(clickHandler, 'cl565959595')

        // 可以通过 将之前的拿到的回调赋值为 空函数 达到 取消某部分监听内容的作用
        // clickHandlerCallBack.value = () => {}
        clickHandlerMore.value = () => {}
      }
      /**
       * 注册鼠标左键点击事件
       */
      const leftClickEvents = () => {
        eventLis = new EventListenter('left-click', () => {
          console.log('第一第一')
        }, '1')
        console.log(eventLis, '666666666666')
        eventLis.start()
        viewer.screenSpaceEventHandler.setInputAction(() => eventLis.start(),
          Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }
      /**
       * 追加鼠标左键点击事件
       */
      const moreLeftClickEvents = () => {
        eventLis.append(() => {
          console.log('第二第二')
        }, undefined, '2')
        viewer.screenSpaceEventHandler.setInputAction(() => eventLis.start(),
          Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }
      /**
       * 再次追加鼠标左键点击事件
       */
      const moreAgainLeftClickEvents = () => {
        // 获取默认的左键处理程序，用于在左键单击时未选中某个特性
        clickHandlerMore.value = viewer.screenSpaceEventHandler.getInputAction(
          // viewer.screenSpaceEventHandler是Cesium中的一个对象，用于处理屏幕空间的交互事件。
          // getInputAction方法用于获取指定类型事件的处理函数。
          Cesium.ScreenSpaceEventType.LEFT_CLICK
        )
        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
            movement
          ) {
            clickHandlerMore.value()
            console.log(333)
          },
          Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }
      /**
       * 注销鼠标左键点击事件
       */
      const signOutleftClickEvents = () => {
        console.log('注销鼠标左键点击事件')
        //注销鼠标左键的方法直接注销了鼠标左键事件，回调为undefined        。
        // viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
        // const clickHandler = viewer.screenSpaceEventHandler.getInputAction(
        //   // viewer.screenSpaceEventHandler是Cesium中的一个对象，用于处理屏幕空间的交互事件。
        //   // getInputAction方法用于获取指定类型事件的处理函数。
        //   Cesium.ScreenSpaceEventType.LEFT_CLICK
        // )
        // console.log(clickHandler, 'cl565959595')

        // 可以通过 将之前的拿到的回调赋值为 空函数 达到 取消某部分监听内容的作用
        // clickHandlerCallBack.value = () => {}
        clickHandlerMore.value = () => {}
      }

      /**
       * 获取鼠标点击坐标
       */
      const getCoordinate = () => {
        // 获取的是屏幕二维坐标（移动）
        // const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        // handler.setInputAction(function(movement) {
        //   console.log(movement, '---movement--') // 起始坐标点，一般使用结束坐标点
        //   const position = movement.endPosition // 鼠标当前位置的屏幕坐标
        //   console.log('position', position)
        // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
        // 获取的是屏幕二维坐标（左击）
        // const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        // handler.setInputAction(function(movement) {
        //   console.log(movement, '---movement--')
        //   const position = movement.position // 鼠标当前位置的屏幕坐标
        //   console.log('position', position)
        // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

        //获取鼠标点击位置的地理坐标（经度、纬度、高度）：
        const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        handler.setInputAction(function(movement) {
          // viewer.camera.pickEllipsoid()用于获取相机位置
          const cartesian = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid)
          console.log('cartesian', cartesian)
          // viewer.scene.pickPosition()用于获取鼠标点击位置的地形高度
          const pickedTerrain = viewer.scene.pickPosition(movement.position)
          console.log('pickedTerrain', pickedTerrain)
          if(cartesian) {
            const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
            console.log('cartographic', cartographic) //单位是弧度
            const longitude = Cesium.Math.toDegrees(cartographic.longitude) //(单位是度)
            const latitude = Cesium.Math.toDegrees(cartographic.latitude)//(单位是度)
            const height = cartographic.height
            console.log('longitude', longitude)
            console.log('latitude', latitude)
            console.log('height', height)
            // 使用获取到的经度、纬度、高度坐标进行其他操作
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

        // 获取鼠标点击位置的相对于地形表面的高度：
        // const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        // handler.setInputAction(function(movement) {
        //   // viewer.scene.pickPosition(movement.position)方法通过传入鼠标点击位置（movement.position）获取到了一个Cartesian3对象，
        //   // 表示点击位置的三维笛卡尔坐标。这个三维坐标是基于空间直角坐标系的。
        //   const pickedTerrain = viewer.scene.pickPosition(movement.position)
        //   console.log('pickedTerrain', pickedTerrain) // x,y,z 空间直角坐标系
        //   if(Cesium.defined(pickedTerrain)) {
        //     const cartographic = Cesium.Cartographic.fromCartesian(pickedTerrain)
        //     console.log('cartographic', cartographic) //单位是弧度
        //     const height = cartographic.height
        //     console.log('height', height)
        //     // 使用获取到的高度进行其他操作
        //   }
        // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }

      //挂载完成执行的程序
      onMounted(() => {
        console.log(viewer.scene.canvas === viewer.canvas) //true
      })
      //销毁组件
      onBeforeUnmount(() => {
        // vue程序销毁时，需要清理相关资源
        console.log(22222)
      })
      return {
        leftClickEvent,
        signOutleftClickEvent,
        moreLeftClickEvent,
        moreAgainLeftClickEvent,
        leftClickEvents,
        signOutleftClickEvents,
        moreLeftClickEvents,
        moreAgainLeftClickEvents,
        getCoordinate
      }
    },
    // 1.2 资源销毁
    beforeDestroy() {
      // vue程序销毁时，需要清理相关资源
    }
  })
  app.mount('#vueContainer')
</script>
</body>
</html>
